<template>
  <div style="max-width: 1000px; margin: 0 auto; padding: 20px;">
    <h1>🔍 NuxtImg 工作原理详解</h1>

    <!-- 核心问题 -->
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 10px; margin: 20px 0;">
      <h2 style="margin-top: 0; color: white;">💡 你的疑问</h2>
      <p style="font-size: 1.2em; margin: 0;">
        NuxtImg 为什么这么快？图片也是在服务端渲染的吗？
      </p>
    </div>

    <!-- 简短答案 -->
    <div style="border: 3px solid #4caf50; padding: 25px; margin: 20px 0; border-radius: 10px; background: #f1f8f4;">
      <h2 style="margin-top: 0; color: #2e7d32;">✅ 简短答案</h2>
      <ul style="font-size: 1.1em; line-height: 1.8;">
        <li><strong>图片本身不是在服务端渲染的</strong>（图片是二进制文件，不能"渲染"）</li>
        <li><strong>HTML 标签在服务端生成</strong>（SSR 生成 &lt;img&gt; 标签）</li>
        <li><strong>图片请求经过 IPX 服务优化</strong>（Nuxt 内置的图片处理引擎）</li>
        <li><strong>快的原因：自动优化 + 懒加载 + 格式转换</strong></li>
      </ul>
    </div>

    <!-- 详细工作流程 -->
    <div style="border: 2px solid #2196f3; padding: 25px; margin: 20px 0; border-radius: 10px;">
      <h2 style="color: #1976d2;">🔄 完整工作流程</h2>

      <div style="background: #f5f5f5; padding: 20px; border-radius: 8px; margin: 20px 0;">
        <h3>步骤 1️⃣ - 服务端渲染（SSR）</h3>
        <p>你写的代码：</p>
        <pre style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; overflow-x: auto;">
&lt;NuxtImg src="/image/cute.png" width="180" /&gt;</pre>
        
        <p>服务端生成的 HTML：</p>
        <pre style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; overflow-x: auto;">
&lt;img 
  src="/_ipx/w_180&f_webp/image/cute.png" 
  width="180"
  loading="lazy"
/&gt;</pre>

        <div style="background: #e3f2fd; padding: 15px; border-radius: 5px; margin-top: 10px;">
          <strong>🔑 关键点：</strong>
          <ul>
            <li>服务端只生成了 <code>&lt;img&gt;</code> 标签（HTML 文本）</li>
            <li>图片路径被改写为 <code>/_ipx/...</code>（IPX 服务的 URL）</li>
            <li>添加了优化参数：<code>w_180</code>（宽度）、<code>f_webp</code>（格式）</li>
          </ul>
        </div>
      </div>

      <div style="background: #f5f5f5; padding: 20px; border-radius: 8px; margin: 20px 0;">
        <h3>步骤 2️⃣ - 浏览器接收 HTML</h3>
        <p>浏览器收到完整的 HTML，包含 <code>&lt;img&gt;</code> 标签</p>
        <div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 10px;">
          <strong>⚡ 这就是为什么快：</strong>
          <ul>
            <li>HTML 已经包含图片标签，不需要等 JavaScript 执行</li>
            <li>浏览器可以立即开始下载图片</li>
            <li>如果设置了 <code>loading="lazy"</code>，图片会延迟加载</li>
          </ul>
        </div>
      </div>

      <div style="background: #f5f5f5; padding: 20px; border-radius: 8px; margin: 20px 0;">
        <h3>步骤 3️⃣ - 浏览器请求图片</h3>
        <p>浏览器向服务器请求：<code>/_ipx/w_180&f_webp/image/cute.png</code></p>
        <div style="background: #e8f5e9; padding: 15px; border-radius: 5px; margin-top: 10px;">
          <strong>🎨 IPX 服务处理：</strong>
          <ol>
            <li>读取原始图片 <code>/image/cute.png</code></li>
            <li>使用 <code>sharp</code> 库处理图片：
              <ul>
                <li>调整尺寸为 180px 宽度</li>
                <li>转换格式为 WebP</li>
                <li>压缩图片质量（默认 80%）</li>
              </ul>
            </li>
            <li>缓存优化后的图片</li>
            <li>返回给浏览器</li>
          </ol>
        </div>
      </div>

      <div style="background: #f5f5f5; padding: 20px; border-radius: 8px; margin: 20px 0;">
        <h3>步骤 4️⃣ - 浏览器显示图片</h3>
        <p>浏览器接收到优化后的图片并显示</p>
        <div style="background: #fce4ec; padding: 15px; border-radius: 5px; margin-top: 10px;">
          <strong>📊 效果对比：</strong>
          <ul>
            <li>原始图片：可能 2MB，PNG 格式</li>
            <li>优化后：可能 50KB，WebP 格式，正确尺寸</li>
            <li><strong>文件大小减少 97%！</strong></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 对比表格 -->
    <div style="border: 2px solid purple; padding: 25px; margin: 20px 0; border-radius: 10px;">
      <h2 style="color: #6a1b9a;">📊 普通 img vs NuxtImg 对比</h2>
      
      <table style="width: 100%; border-collapse: collapse; margin-top: 15px;">
        <thead>
          <tr style="background: #f0f0f0;">
            <th style="border: 1px solid #ddd; padding: 12px; text-align: left;">对比项</th>
            <th style="border: 1px solid #ddd; padding: 12px; text-align: left;">普通 &lt;img&gt;</th>
            <th style="border: 1px solid #ddd; padding: 12px; text-align: left;">NuxtImg</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="border: 1px solid #ddd; padding: 10px;"><strong>SSR 生成标签</strong></td>
            <td style="border: 1px solid #ddd; padding: 10px;">✅ 是</td>
            <td style="border: 1px solid #ddd; padding: 10px;">✅ 是</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ddd; padding: 10px;"><strong>图片优化</strong></td>
            <td style="border: 1px solid #ddd; padding: 10px;">❌ 否（加载原始图片）</td>
            <td style="border: 1px solid #ddd; padding: 10px;">✅ 是（自动压缩、转换）</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ddd; padding: 10px;"><strong>响应式尺寸</strong></td>
            <td style="border: 1px solid #ddd; padding: 10px;">❌ 否（固定尺寸）</td>
            <td style="border: 1px solid #ddd; padding: 10px;">✅ 是（根据设备调整）</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ddd; padding: 10px;"><strong>格式转换</strong></td>
            <td style="border: 1px solid #ddd; padding: 10px;">❌ 否</td>
            <td style="border: 1px solid #ddd; padding: 10px;">✅ 是（自动 WebP/AVIF）</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ddd; padding: 10px;"><strong>懒加载</strong></td>
            <td style="border: 1px solid #ddd; padding: 10px;">⚠️ 手动添加</td>
            <td style="border: 1px solid #ddd; padding: 10px;">✅ 自动</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ddd; padding: 10px;"><strong>文件大小</strong></td>
            <td style="border: 1px solid #ddd; padding: 10px;">🔴 2MB</td>
            <td style="border: 1px solid #ddd; padding: 10px;">🟢 50KB（示例）</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- IPX 服务详解 -->
    <div style="border: 2px solid #ff9800; padding: 25px; margin: 20px 0; border-radius: 10px;">
      <h2 style="color: #e65100;">🔧 IPX 图片服务详解</h2>
      
      <p><strong>IPX</strong> 是 Nuxt Image 内置的图片优化服务器，运行在你的 Nuxt 服务器上。</p>

      <h3>IPX URL 格式：</h3>
      <pre style="background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; overflow-x: auto;">
/_ipx/修饰符1_修饰符2/原始图片路径

示例：
/_ipx/w_300&h_200&f_webp&q_80/image/cute.png

修饰符说明：
- w_300：宽度 300px
- h_200：高度 200px
- f_webp：格式转换为 WebP
- q_80：质量 80%
      </pre>

      <h3>IPX 做了什么？</h3>
      <ul style="line-height: 1.8;">
        <li>📐 <strong>调整尺寸</strong>：避免加载过大的图片</li>
        <li>🎨 <strong>格式转换</strong>：转换为现代格式（WebP、AVIF）</li>
        <li>🗜️ <strong>压缩</strong>：减小文件体积</li>
        <li>💾 <strong>缓存</strong>：优化后的图片会缓存，下次访问更快</li>
        <li>🚀 <strong>CDN 兼容</strong>：可以配合 CDN 使用</li>
      </ul>

      <div style="background: #fff3e0; padding: 15px; border-radius: 5px; margin-top: 15px;">
        <strong>🔑 关键理解：</strong>
        <p style="margin: 10px 0;">
          IPX 是一个<strong>运行时</strong>的图片优化服务。第一次请求时会处理图片，之后会使用缓存。
          这不同于构建时优化（build-time），更灵活但需要服务器支持。
        </p>
      </div>
    </div>

    <!-- 实际演示 -->
    <div style="border: 2px solid #00bcd4; padding: 25px; margin: 20px 0; border-radius: 10px;">
      <h2 style="color: #006064;">🧪 实际演示</h2>
      
      <p>打开浏览器开发者工具（F12）→ Network 标签，然后查看下面的图片：</p>

      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0;">
        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 8px;">
          <h4>普通 img：</h4>
          <img src="/image/cute.png" alt="普通图片" style="width: 100%; max-width: 200px; border-radius: 8px;">
          <p style="color: #666; font-size: 0.9em; margin-top: 10px;">
            查看 Network：<br>
            请求 URL: <code>/image/cute.png</code><br>
            文件大小: 原始大小
          </p>
        </div>

        <div style="border: 1px solid #4caf50; padding: 15px; border-radius: 8px; background: #f1f8f4;">
          <h4>NuxtImg：</h4>
          <NuxtImg src="/image/cute.png" alt="优化图片" width="200" style="width: 100%; max-width: 200px; border-radius: 8px;" />
          <p style="color: #2e7d32; font-size: 0.9em; margin-top: 10px;">
            查看 Network：<br>
            请求 URL: <code>/_ipx/w_200&f_webp/image/cute.png</code><br>
            文件大小: 大幅减小 ✅
          </p>
        </div>
      </div>

      <div style="background: #e3f2fd; padding: 15px; border-radius: 5px; margin-top: 15px;">
        <strong>💡 观察要点：</strong>
        <ol>
          <li>查看两个图片的请求 URL 是否不同</li>
          <li>对比文件大小（Size 列）</li>
          <li>查看响应头中的 Content-Type（WebP vs PNG）</li>
        </ol>
      </div>
    </div>

    <!-- 为什么这么快总结 -->
    <div style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; padding: 30px; border-radius: 10px; margin: 20px 0;">
      <h2 style="margin-top: 0; color: white;">🚀 为什么 NuxtImg 这么快？</h2>
      
      <ol style="font-size: 1.1em; line-height: 2;">
        <li><strong>SSR 生成标签</strong> → 浏览器立即看到 &lt;img&gt;，不等 JS</li>
        <li><strong>自动优化尺寸</strong> → 只加载需要的大小，不浪费带宽</li>
        <li><strong>现代格式</strong> → WebP 比 PNG/JPG 小 25-35%</li>
        <li><strong>懒加载</strong> → 屏幕外的图片不立即加载</li>
        <li><strong>缓存</strong> → 优化后的图片缓存，下次更快</li>
        <li><strong>压缩</strong> → 智能压缩，减小文件体积</li>
      </ol>

      <p style="font-size: 1.2em; margin: 20px 0 0 0; border-top: 2px solid rgba(255,255,255,0.3); padding-top: 20px;">
        <strong>结论：</strong>快不是因为"在服务端渲染图片"，而是因为<strong>智能优化 + SSR HTML + 懒加载</strong>的组合！
      </p>
    </div>

    <!-- 常见误解 -->
    <div style="border: 2px solid #e91e63; padding: 25px; margin: 20px 0; border-radius: 10px; background: #fce4ec;">
      <h2 style="color: #c2185b;">❌ 常见误解</h2>
      
      <div style="background: white; padding: 15px; border-radius: 5px; margin: 10px 0;">
        <p><strong>误解：</strong>图片在服务端渲染成 HTML</p>
        <p style="color: #c2185b;"><strong>正确：</strong>图片是二进制文件，不能渲染成 HTML。服务端只生成 &lt;img&gt; 标签（HTML 文本）</p>
      </div>

      <div style="background: white; padding: 15px; border-radius: 5px; margin: 10px 0;">
        <p><strong>误解：</strong>图片存储在服务端的内存里</p>
        <p style="color: #c2185b;"><strong>正确：</strong>图片存储在文件系统，IPX 动态读取和优化</p>
      </div>

      <div style="background: white; padding: 15px; border-radius: 5px; margin: 10px 0;">
        <p><strong>误解：</strong>所有优化都在服务端完成</p>
        <p style="color: #c2185b;"><strong>正确：</strong>优化在 IPX 服务完成（可能是同一台服务器，也可能是专门的图片服务器）</p>
      </div>
    </div>

    <hr style="margin: 40px 0;">
    <div style="text-align: center;">
      <NuxtLink to="/image-demo" style="display: inline-block; background: #2196f3; color: white; padding: 12px 30px; border-radius: 5px; text-decoration: none; font-weight: 500; margin-right: 10px;">
        ⬅️ 返回图片演示
      </NuxtLink>
      <NuxtLink to="/" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 30px; border-radius: 5px; text-decoration: none; font-weight: 500;">
        🏠 返回学习中心
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
onMounted(() => {
  console.log('🔍 NuxtImg 原理页面已加载')
  console.log('💡 打开 Network 标签，观察图片请求的 URL 和大小！')
})
</script>

<style scoped>
code {
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  color: #d63384;
  font-size: 0.9em;
}

h2 {
  color: #333;
  margin-top: 0;
}

h3 {
  color: #555;
  margin-top: 20px;
}

h4 {
  color: #666;
  margin-bottom: 10px;
}

table {
  font-size: 0.95em;
}
</style>

